/* 
定义组件
  1. 函数组件: 不能有state(内部可变数据对象)
  2. 类组件: 可以有state
state的3个操作
  1. 初始化状态数据
  2. 读取状态数据
  3. 更新状态数据
类组件对象的生命周期
  1. 初始化挂载: componentWillMount => render => componentDidMount
  2. 更新: componentWillUpdate => render => componentDidUpdate
  3. 卸载: componentWillUnmount
组件间通信
  1. props: 父子之间的通信
    父向子: 非函数props 
    子向父: 函数props
  2. pub-sub/redux
    任意组件间通信
搭建路由:
  npm i react-router-dom
  引入并使用相关组件
    BrowserRouter / HashRouter
    Switch / Route / Redirect
    NavLink / Link
路由跳转的2种方式:
  1. 声明式: <NavLink>  / <Link>
  2. 编程式: this.props.history.push(path)   / withRouter包装非路由组件
向路由组件传递数据
  1). params参数
  2). query参数(有点麻烦, 需要进一解析才可以用)
  3). state (1. 必须history模式, 2. 编程式路由导航)
*/
import React, {Component} from 'react'
import {Switch, Route, Redirect, NavLink, withRouter} from 'react-router-dom'
import RouteComp1 from './pages/RouteComp1'
import RouteComp2 from './pages/RouteComp2'

import './App.css'

/* export default function App(props) {
  return <div>App组件</div>
} */

class App extends Component {



  render () {
    return (
      <div>
        {/* <RouteComp1 m="aa" n={123}/> */}
        <h1>App组件</h1>
        {/* 路由链接 */}
        <NavLink to="/rc1">去路由1111</NavLink>
        <NavLink to="/rc2/2?count2=4&count3=6" style={{margin: 10}}>去路由2222</NavLink>
        <button onClick={() => this.props.history.push('/rc2/3?count2=5&count3=7')}>去路由222</button>
        <button onClick={() => this.props.history.push('/rc2/3?count2=5&count3=7', {count4: 8})}>去路由222(带state)</button>
        <hr />

        {/* 注册路由 */}
        <Switch>
          {/* 只有请求的是项目根路径, 才自动跳转到/rc1 */}
          <Redirect from="/" to="/rc1" exact></Redirect>
          <Route path="/rc1" component={RouteComp1}></Route>
          <Route path="/rc2/:count1" component={RouteComp2}></Route>
          <Route render={() => <h1>404页面</h1>}></Route>
        </Switch>
      </div>
    )
  }
}

export default withRouter(App) // 这样App就能接收到history/location/match三个props对象